<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
  <script type="text/babel">
    // 循环渲染：
    let course = [
      {id: 1, name: '大前端',dec: 'H5/vue/app',color: 'blue'},
      {id: 2, name: 'Java',dec: 'ssm/Java web', color: 'red'},
      {id: 3, name: 'Python',dec: 'pythone', color: 'green'},
      {id: 4, name: 'UI',dec: 'UE', color: 'black'},
    ];
    // Each child in a list should have a unique "key" prop.
    // 和vue一样，循环遍历时，需要给重复节点加上key属性，来提高渲染效率
    let node1 = <div>
        <p>遍历数组</p>
        <ul>
          {course.map(function (item, index) {
            return <li key={index}>
                <div style={{color: item.color}}>
                  <span>编号：{item.id}.</span>
                  <span>名称：{item.name}.</span>
                  <span>描述：{item.dec}.</span>
                </div>
              </li>
          })}
        </ul>
      </div>
    ReactDOM.render(node1, div1);
  </script>
</body>
</html>